﻿@{
    Layout = "~/Views/Shared/_LayoutBase.cshtml";
    ViewData["Title"] = "控制文本与文本展示";
}

<h2>@ViewData["Title"]</h2>

<!--value、text、click、visible-->
<div>
    <label>公司名称</label>
    <input type="text" data-bind="value:unitName" /><br />
    <label>公司地址</label>
    <input type="text" data-bind="value:address" /><br />
    <p data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></p>
    <pre data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></pre>
    <label data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></label><br />
    <span data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></span><br />
    <table>
        <tr>
            <th data-bind="text:unitName"></th>
        </tr>
        <tr>
            <td data-bind="text:address"></td>
        </tr>
    </table>
    <div data-bind="visible:visibleButton">
        <button data-bind="click: updateUnitName">修改公司名称为中部星城科技</button><br />
        <button data-bind="click: updateAddress">修改公司地址为湖南长沙雨花区</button>
    </div>
    <div>
        <button data-bind="click:function(){viewModel.visibleButton(false);}">隐藏上面两个按钮</button>
    </div>
</div>


<div style="margin-top:50px;">
    <style type="text/css">
        .testClass {
            background-color: #ffd800;
            font-size: 16px;
        }
    </style>
    <label>公司类型：</label>
    <select data-bind="options:unitTypeOptions, optionsCaption:'---请选择公司类型---',optionsText: 'text', optionsValue: 'value', value:choiceUnitTypeValue"></select><br />
    <input type="checkbox" data-bind="checked:visibleLabel" /><label data-bind="css: { testClass: visibleLabel}">启用展示</label>
    <label data-bind="text:'选中值：'+choiceUnitTypeValue(),visible:visibleLabel"></label><br />
    <a data-bind="attr: { title: tips},style:{'background-color':visibleLabel()?'red':'white'}">公司官网</a>
    <button data-bind="click:function(){viewModel.tips('knockoutJS');}">切换a标签提示信息</button>
</div>


<div style="margin-top:50px;">
    <label>html元素所绑定的内容为：</label>
    <label data-bind="html:htmlContent"></label><br />
    <div data-bind="event:{mouseover:buttonKeyPress}">
        鼠标移入改变html元素绑定内容
    </div>
    <hr />
    <form action="@Url.Action("CreateUser")" method="post" data-bind="submit:submitForm">
        <label>用户名：</label>
        <input type="text" name="userName" data-bind="enable:userNameEnable" />
        <label>密码：</label>
        <input type="text" name="password" data-bind="disable:passwordDisable" />
        <input type="submit" value="增加" />
    </form><br />
    <button data-bind="click:function(){viewModel.userNameEnable(true);}">启用用户名输入</button>
    <button style="margin-left:10px;" data-bind="click:function(){viewModel.passwordDisable(false);}">启用密码输入</button><br />
    <hr />
    <p>
        <select data-bind="options: companyOptions,selectedOptions: chosenCompanies" size="5" multiple="true"></select>
        <select data-bind="options: chosenCompanies," size="5"></select>
    </p>
</div>

@section Scripts{
    <script type="text/javascript">
        var viewModel = {
            //value、text
            unitName: ko.observable(""),
            address: ko.observable(""),

            //click
            //viewModel内JS函数
            updateAddress: function () {
                this.address("湖南长沙雨花区");
            },

            //visible
            visibleButton: ko.observable(true),

            //options
            unitTypeOptions: ko.observableArray([
                { text: "有限公司", value: "1" },
                { text: "有限责任公司", value: "2" },
                { text: "国有独资公司", value: "3" },
                { text: "股份有限公司", value: "4" }
            ]),
            choiceUnitTypeValue: ko.observable(),

            //checked
            visibleLabel: ko.observable(true),

            //attr
            tips: ko.observable("hello"),

            //html
            htmlContent: ko.observable("<a href='#'>百度一下</a>"),

            //event
            buttonKeyPress: function () {
                this.htmlContent("keyPress事件被触发！");
            },

            //submit
            submitForm: function (formElement) {
                //执行逻辑
                //执行表单提交
                //或返回到默认表单提交return true
                return true;
            },

            //enable
            userNameEnable: ko.observable(false),

            //disable
            passwordDisable: ko.observable(true),

            //selectedOptions
            companyOptions: ko.observableArray(['百度', '阿里', '腾讯']),
            chosenCompanies: ko.observableArray(['百度'])
        };

        //任意JS函数
        function updateUnitName() {
            viewModel.unitName("中部星城科技");
        }

        $(function () {
            ko.applyBindings(viewModel);//完成绑定
        });
    </script>
}
